import React, { Component, PropTypes } from 'react';
import * as Relay from "react-relay";
import { Button, Modal } from 'antd';
import Page from '../Page/PageComponent';
import styles from './Profile.scss';
import Table from '../Table/Table';
import APForm from '../Form/Form';
import AddProfileMutation from '../../relay/account/AddProfileMutation';
import constants from './Constants';

class ProfileListComponent extends Component {
  state = {
    showNewCompanyModal: false
  };

  render() {
    const { viewer } = this.props;
    const keys = [
      {name:"name", display:"名称", onClick: (data) => this.context.router.push(`/profile/${data.id}`)},
    ];
    return (
      <div>
        <Page heading="profile列表">
          <Table
            keys={keys}
            data={viewer.profiles.edges}
            styles={styles}
          />
          <Button type="primary"
            onClick={() => {this.setState({showNewCompanyModal: true,})}}
          >增加Profile</Button>
          <Modal
            title="新增profile"
            visible={this.state.showNewCompanyModal}
            footer={null}
          >
            <APForm
              viewer={viewer}
              checkFields={constants.checkFields}
              fields={constants.inputFields}
              mutation={AddProfileMutation}
              mutationData={{viewer}}
              onSubmit={() => {this.setState({ showNewCompanyModal: false })}}
              onCancel={() => {this.setState({ showNewCompanyModal: false })}}
            />
          </Modal>
        </Page>
      </div>
    );
  }
}

ProfileListComponent.contextTypes = {
  router: PropTypes.object.isRequired,
};

export default Relay.createContainer(ProfileListComponent, {
  initialVariables: {
    defaultFirst: 1000,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        id
        profiles(first: $defaultFirst){
          edges{
            node{
              id
              name
            }
          }
        }
      }
    `
  }
})
